<template>
  <div class="test-table" ref="tableContainer">
    <div class="table-header-wrapper">
      <table ref="headerTable" class="header-table">
        <colgroup>
          <col v-for="header in headers" :key="header.key" :style="{ width: header.width + 'px' }" />
        </colgroup>
        <thead>
          <tr>
            <th v-for="(header, index) in headers" :key="header.key" class="resizable-header" :ref="el => { if (el) headerRefs[index] = el; }">
              <div class="header-content">{{ header.label }}</div>
              <div 
                v-if="index < headers.length - 1"
                class="resize-handle" 
                @mousedown="startResize($event, index)"
              ></div>
            </th>
          </tr>
        </thead>
      </table>
    </div>

    <div class="table-body-wrapper" ref="tableBodyWrapper" @scroll="onTableScroll">
      <table ref="bodyTable" class="body-table">
        <colgroup>
          <col v-for="header in headers" :key="header.key" :style="{ width: header.width + 'px' }" />
        </colgroup>
        <tbody>
          <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
            <td v-for="header in headers" :key="header.key">
              <span v-if="header.key === 'operation'">
                <button class="text-button" @click="handleOperation(rowIndex)">操作</button>
              </span>
              <span v-else>{{ row[header.key] }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div v-if="showOperationDialog" class="operation-dialog">
      <div class="dialog-content">
        <h3>{{ currentOperation }}操作</h3>
        <p>您正在对第{{ currentRowIndex + 1 }}行数据进行操作</p>
        <div class="row-data" v-if="currentRowData">
          <div class="data-item">
            <label class="data-label">姓名:</label>
            <input 
              v-model="editableRowData.name" 
              class="data-input" 
              :placeholder="currentRowData.name"
            />
          </div>
          <div class="data-item">
            <label class="data-label">城市:</label>
            <input 
              v-model="editableRowData.city" 
              class="data-input" 
              :placeholder="currentRowData.city"
            />
          </div>
          <div class="data-item">
            <label class="data-label">工作过的城市:</label>
            <input
              class="data-input" 
              placeholder="请勾选之前工作过的城市"
              readonly
              @click="openWorkCitiesModal('workCities')"
            />
          </div>
          <div class="selected-cities-tags" v-if="getSelectedCities('workCities').length > 0">
            <template v-for="(city, index) in getSelectedCities('workCities')" :key="index">
              <span class="city-tag">
                {{ city }}
                <button 
                  @click="removeCity('workCities', city)" 
                  class="remove-city-btn"
                >
                  ×
                </button>
              </span>
            </template>
          </div>
          <div class="data-item">
            <label class="data-label">职位:</label>
            <input 
              v-model="editableRowData.position" 
              class="data-input" 
              :placeholder="currentRowData.position"
            />
          </div>
        </div>
        <div class="dialog-buttons">
          <button @click="confirmOperation" class="confirm-btn">确认</button>
          <button @click="closeOperationDialog" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
    
    <!-- 工作城市选择模态框 -->
    <div v-if="showWorkCitiesModal" class="work-cities-dialog">
      <div class="work-cities-content">
        <h3>选择工作过的城市</h3>
        <div class="work-cities-table-container">
          <table class="work-cities-table">
            <thead>
              <tr>
                <th>选择</th>
                <th>城市名称</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(city, index) in allCities" :key="index">
                <td>
                  <input 
                    type="checkbox" 
                    :value="city" 
                    v-model="selectedWorkCities"
                  />
                </td>
                <td>{{ city }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="work-cities-buttons">
          <button @click="confirmWorkCities" class="confirm-btn">确认</button>
          <button @click="closeWorkCitiesModal" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'modalTable',
  data() {
    return {
      currentRowData: null,
      editableRowData: {},
      headers: [
        { 
          label: '姓名', 
          key: 'name', 
          width: 120
        },
        { 
          label: '城市', 
          key: 'city', 
          width: 120
        },
        { 
          label: '工作过的城市', 
          key: 'workCities',
          width: 120
        },
        { 
          label: '职位', 
          key: 'position',
          width: 120
        },
        { 
          label: '操作', 
          key: 'operation',
          width: 80
        },
      ],
      rows: [
        { 
          name: '张三', 
          city: '北京', 
          workCities: '',
          position: '前端开发',
          operation: '操作'
        },
        { 
          name: '李四', 
          city: '上海', 
          workCities: '',
          position: '后端开发', 
          operation: '操作'
        },
        { 
          name: '王五', 
          city: '广州', 
          workCities: '',
          position: '前端开发', 
          operation: '操作'
        },
        { 
          name: '赵六', 
          city: '深圳', 
          workCities: '',
          position: '前端开发', 
          operation: '操作'
        },
        { 
          name: '钱七', 
          city: '杭州', 
          workCities: '', 
          position: '前端开发', 
          operation: '操作'
        }
      ],
      headerRefs: [],
      resizing: false,
      startX: 0,
      startWidthLeft: 0,
      startWidthRight: 0,
      leftIndex: -1, 
      rightIndex: -1,
      showOperationDialog: false,
      currentOperation: '',
      currentRowIndex: -1,
      // 工作城市模态框相关数据
      showWorkCitiesModal: false,
      selectedWorkCities: [],
      currentWorkCitiesField: '',
      allCities: [
        '北京', '上海', '广州', '深圳', '杭州', 
        '成都', '南京', '武汉', '西安', '重庆',
        '天津', '苏州', '长沙', '郑州', '青岛'
      ]
    };
  },
  computed: {
  },
  mounted() {
    document.addEventListener('mousemove', this.onMouseMove);
    document.addEventListener('mouseup', this.onMouseUp);
  },
  beforeUnmount() {
    document.removeEventListener('mousemove', this.onMouseMove);
    document.removeEventListener('mouseup', this.onMouseUp);
  },
  methods: {
    handleOperation(rowIndex) {
      this.currentOperation = '操作';
      this.currentRowIndex = rowIndex;
      this.currentRowData = this.rows[rowIndex];
      
      this.editableRowData = { ...this.rows[rowIndex] };
      
      this.showOperationDialog = true;
    },
    
    // 打开工作城市选择模态框
    openWorkCitiesModal(field) {
      this.currentWorkCitiesField = field;
      // 初始化已选择的城市
      const workCitiesStr = this.editableRowData[field] || '';
      this.selectedWorkCities = workCitiesStr ? workCitiesStr.split(',') : [];
      this.showWorkCitiesModal = true;
    },
    
    // 关闭工作城市选择模态框
    closeWorkCitiesModal() {
      this.showWorkCitiesModal = false;
      this.selectedWorkCities = [];
      this.currentWorkCitiesField = '';
    },
    
    // 确认工作城市选择
    confirmWorkCities() {
      // 将选中的城市更新到editableRowData中
      this.editableRowData[this.currentWorkCitiesField] = this.selectedWorkCities.join(',');
      this.closeWorkCitiesModal();
    },
    
    // 获取选中的城市列表
    getSelectedCities(field) {
      const citiesStr = this.editableRowData[field] || '';
      return citiesStr ? citiesStr.split(',') : [];
    },
    
    // 删除选中的城市
    removeCity(field, cityToRemove) {
      const cities = this.getSelectedCities(field);
      const updatedCities = cities.filter(city => city !== cityToRemove);
      this.editableRowData[field] = updatedCities.join(',');
    },
    getHeaderLabel(key) {
      const header = this.headers.find(h => h.key === key);
      return header ? header.label : key;
    },
    closeOperationDialog() {
      this.showOperationDialog = false;
      this.currentOperation = '';
      this.currentRowIndex = -1;
      this.currentRowData = null;
      this.editableRowData = {};
    },
    confirmOperation() {
      if (this.currentRowIndex >= 0 && this.currentRowIndex < this.rows.length) {
        const operationValue = this.rows[this.currentRowIndex].operation;
        this.rows.splice(this.currentRowIndex, 1, { 
          ...this.editableRowData, 
          operation: operationValue 
        });
      }
      this.closeOperationDialog();
    },
    startResize(event, index) {
      this.resizing = true;
      this.leftIndex = index;
      this.rightIndex = index + 1;
      this.startX = event.clientX;
      this.startWidthLeft = this.headers[this.leftIndex].width;
      this.startWidthRight = this.headers[this.rightIndex].width;
      
      event.preventDefault();
    },
    
    onMouseMove(event) {
      if (!this.resizing) return;
      
      document.body.classList.add('resizing');
      
      const diff = event.clientX - this.startX;
      
      const totalWidth = this.startWidthLeft + this.startWidthRight;
      let newWidthLeft = this.startWidthLeft + diff;
      let newWidthRight = this.startWidthRight - diff;
      
      if (newWidthLeft < 50) {
        newWidthLeft = 50;
        newWidthRight = totalWidth - 50;
      } else if (newWidthRight < 50) {
        newWidthRight = 50;
        newWidthLeft = totalWidth - 50;
      }
      
      this.headers[this.leftIndex].width = newWidthLeft;
      this.headers[this.rightIndex].width = newWidthRight;
    },
    
    onMouseUp() {
      if (this.resizing) {
        this.resizing = false;
        this.leftIndex = -1;
        this.rightIndex = -1;
        
        document.body.classList.remove('resizing');
      }
    },
    
    onTableScroll(event) {
      if (this.$refs.headerTable) {
        this.$refs.headerTable.style.transform = `translateX(${-event.target.scrollLeft}px)`;
      }
    }
  }
};
</script>

<style scoped>
.test-table {
  background: #333;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.table-header-wrapper {
  overflow: hidden;
  flex-shrink: 0;
  background: #2d2d2d;
}

.header-table {
  width: 100%;
  border-collapse: collapse;
  color: #e0e0e0;
  table-layout: fixed;
}

.table-body-wrapper {
  overflow-x: auto;
  overflow-y: scroll; 
  flex-grow: 1;
  margin-top: -1px; 
  max-height: 400px; 
  
  &::-webkit-scrollbar {
    width: 0px; 
    height: 12px;
    background-color: #2d2d2d;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background-color: #2d2d2d;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 6px;
    border: 2px solid #2d2d2d;
    
    &:hover {
      background-color: #777;
    }
  }

  &::-webkit-scrollbar-corner {
    background-color: #2d2d2d;
  }
}

.body-table {
  width: 100%;
  border-collapse: collapse;
  color: #e0e0e0;
  table-layout: fixed;
}

th,
td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid #444;
  border-right: 1px solid #444;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

th:last-child,
td:last-child {
  border-right: none;
}

th {
  color: white;
  font-weight: bold;
  position: relative;
  user-select: none;
  border-right: 1px solid #444;
  background: #2d2d2d;
}

tr:hover {
  background-color: #3a3a3a;
}

.resizable-header {
  padding: 0;
}

.header-content {
  padding: 12px 15px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resize-handle {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  z-index: 1;
}

body.resizing {
  cursor: col-resize;
}

.text-button {
  background: none;
  border: none;
  color: #409eff;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  text-decoration: underline;
}

.text-button:hover {
  color: #66b1ff;
}

.operation-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background-color: #2d2d2d;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid #444;
}

.dialog-content::-webkit-scrollbar {
  width: 8px;
}

.dialog-content::-webkit-scrollbar-track {
  background: #2a2a2a;
  border-radius: 4px;
}

.dialog-content::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

.dialog-content::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.dialog-content h3 {
  margin-top: 0;
  color: #e0e0e0;
}

.dialog-content p {
  color: #aaa;
  margin-bottom: 20px;
}

.row-data {
  margin: 20px 0;
  padding: 15px;
  background-color: #3a3a3a;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #444;
}

.row-data::-webkit-scrollbar {
  width: 6px;
}

.row-data::-webkit-scrollbar-track {
  background: #333;
  border-radius: 3px;
}

.row-data::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

.row-data::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.data-item {
  display: flex;
  margin-bottom: 0;
  padding: 8px 0;
  border-bottom: none;
  align-items: center;
  position: relative;
}

.data-item:last-child {
  border-bottom: none;
}

.data-label {
  font-weight: bold;
  min-width: 90px;
  color: #e0e0e0;
  margin-right: 10px;
}

.data-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #555;
  border-radius: 4px;
  background-color: #333;
  color: #e0e0e0;
  font-size: 14px;
}

.data-input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.confirm-btn,
.cancel-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.confirm-btn {
  background-color: #409eff;
  color: white;
}

.work-cities-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.work-cities-content {
  background-color: #2d2d2d;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  min-width: 500px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid #444;
}

.work-cities-content h3 {
  margin-top: 0;
  color: #e0e0e0;
  text-align: center;
}

.work-cities-table-container {
  margin: 20px 0;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #444;
  border-radius: 4px;
}

.work-cities-table {
  width: 100%;
  border-collapse: collapse;
  color: #e0e0e0;
}

.work-cities-table th,
.work-cities-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #444;
}

.work-cities-table th {
  background-color: #3a3a3a;
  font-weight: bold;
}

.work-cities-table tr:hover {
  background-color: #3a3a3a;
}

.work-cities-table input[type="checkbox"] {
  margin: 0;
  transform: scale(1.3);
  cursor: pointer;
}

.work-cities-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

/* 选中的城市标签样式 */
.selected-cities-tags {
  display: flex;
  gap: 8px;
  margin:0 0 0 100px;
  min-height: 30px;
  max-height: 60px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 5px 0;
  background-color: #3a3a3a;
  border-radius: 4px;
  box-sizing: border-box;
  width: calc(100% - 100px);
}

.selected-cities-tags::-webkit-scrollbar {
  height: 6px;
}

.selected-cities-tags::-webkit-scrollbar-track {
  background: #333;
  border-radius: 3px;
}

.selected-cities-tags::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

.selected-cities-tags::-webkit-scrollbar-thumb:hover {
  background: #666;
}

.city-tag {
  display: inline-flex;
  align-items: center;
  background-color: #666;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.remove-city-btn {
  background: none;
  border: none;
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  padding: 0 4px;
  margin-left: 4px;
  line-height: 1;
}

.remove-city-btn:hover {
  color: #ff4d4f;
}
</style>